<!--
 * @Author: caofujun
 * @Date: 2020-11-05 17:43:24
 * @Description:
-->
<template>
  <div class="search-wrap">
    <!-- 搜索 -->
    <el-form ref="searchForm" :inline="true" :model="crud" label-width="100px" class="demo-form-inline">
      <slot name="left" />
      <el-form-item v-if="commonSwicth.supplier" label="所属供应商：">
        <el-select v-model="crud.query.merchantId" filterable placeholder="请选择" :clearable="true" @change="crud.toQuery">
          <el-option v-for="item in supplierDTOList" :key="item.merchantId" :label="item.merchantName" :value="item.merchantId" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="commonSwicth.category" label="所属类目：">
        <el-cascader
          :value="categoryIds"
          :options="categoryDTOList"
          :props="categoryProps"
          change-on-select="true"
          :clearable="true"
          filterable
          @change="onChange"
        />
      </el-form-item>

      <el-form-item v-if="commonSwicth.brand" label="所属品牌：">
        <el-select v-model="crud.query.brandId" filterable placeholder="请选择" :clearable="true" @change="crud.toQuery">
          <el-option v-for="item in brandDTOList" :key="item.brandId" :label="item.brandName" :value="item.brandId" />
        </el-select>
      </el-form-item>
      <slot name="right" />
    </el-form>
    <div class="pl-20">
      <div>
        <el-button class="filter-item" size="small" type="primary" @click="crud.toQuery">搜索</el-button>
        <el-button style="margin-left: 10px !important" class="filter-item" size="small" @click="resetQuery">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getOptions } from '@/api/common'
import CRUD, { crud } from '@crud/crud'
// import rrOperation from '@crud/RR.operation'
export default {
  name: 'OptionsForm',
  // components: { rrOperation },
  mixins: [crud()],
  props: {
    filtrateOnChange: {
      type: Function,
      default: () => {}
    },
    commonSwicth: {
      type: Object,
      default: () => {
        return {
          category: false,
          brand: false,
          supplier: true
        }
      }
    }
  },
  data() {
    return {
      brandDTOList: [],
      supplierDTOList: [],
      categoryDTOList: [],
      categoryIds: [],
      categoryProps: {
        children: 'childrenCategoryList',
        value: 'categoryId',
        label: 'categoryName',
        checkStrictly: true
      }
    }
  },
  created() {},
  methods: {
    resetQuery() {
      this.categoryIds = []
      this.$emit('reset')
      this.crud.resetQuery()
    },
    async getOptions() {
      try {
        const res = await getOptions()
        if (res.errorCode === 0) {
          this.brandDTOList = res.data.brandList
          this.supplierDTOList = res.data.merchantList
          this.categoryDTOList = res.data.categoryList
        }
      } catch (error) {
        console.log(error)
      }
    },
    onChange(data) {
      this.categoryIds = data
      if (data && data.length > 0) {
        this.crud.query.categoryId = data.slice(-1)[0]
      } else {
        delete this.crud.query.categoryId
      }
      this.crud.toQuery()
    },
    // 刷新钩子
    [CRUD.HOOK.afterRefresh](crud) {
      this.getOptions()
    }
  }
}
</script>
<style lang="scss" scoped>
.search-wrap {
  background: #ffffff;
  padding: 25px 10px 10px 10px;
  // border: 1px solid #dddddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: flex;
  flex-wrap: wrap;
}
.rr {
  width: 100%;
}

.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 10px;
  right: -10px;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>
